<template>
	<!-- 图片魔方 -->
	<div class="component-item">
		<div class="magic-box">
			<div class="diy-style-1" v-if="item.style == 1"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}" @click="navTo(item.images[0].href)">
					<div class="empty-img-box" v-if="!item.images[0]">
						<i class="el-icon-picture"></i>
					</div>
					<img :src="item.images[0].url" mode="widthFix" v-else />
				</div>
			</div>
			<div class="diy-style-2" v-if="item.style == 2"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-2-item" @click="navTo(item.images[0].href)">
						<div class="empty-img-box" v-if="!item.images[0]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[0].url" mode="widthFix" v-else/>
					</div>
					<div class="style-2-item" @click="navTo(item.images[1].href)">
						<div class="empty-img-box" v-if="!item.images[1]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[1].url" mode="widthFix" v-else />
					</div>
				</div>
			</div>
			<div class="diy-style-3" v-if="item.style == 3"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-3-item" @click="navTo(item.images[0].href)">
						<div class="empty-img-box" v-if="!item.images[0]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[0].url" mode="widthFix" v-else />
					</div>
					<div class="style-3-item" @click="navTo(item.images[1].href)">
						<div class="empty-img-box" v-if="!item.images[1]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[1].url" mode="widthFix" v-else />
					</div>
					<div class="style-3-item" @click="navTo(item.images[2].href)">
						<div class="empty-img-box" v-if="!item.images[2]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[2].url" mode="widthFix" v-else />
					</div>
				</div>
			</div>
			<div class="diy-style-4" v-if="item.style == 4"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-left" style="border-right:none" @click="navTo(item.images[0].href)">
						<div class="empty-img-box" v-if="!item.images[0]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[0].url" mode="widthFix" v-else />
					</div>
					<div class="style-right">
						<div class="style-top" style="border-bottom:none" @click="navTo(item.images[1].href)">
							<div class="empty-img-box" v-if="!item.images[1]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[1].url" mode="widthFix" v-else />
						</div>
						<div class="style-down" @click="navTo(item.images[2].href)">
							<div class="empty-img-box" v-if="!item.images[2]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[2].url" mode="widthFix" v-else />
						</div>
					</div>
				</div>
			</div>
			<div class="diy-style-5" v-if="item.style == 5"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-5-item" @click="navTo(item.images[0].href)">
						<div class="empty-img-box" v-if="!item.images[0]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[0].url" mode="widthFix" v-else />
					</div>
					<div class="style-5-item" @click="navTo(item.images[1].href)">
						<div class="empty-img-box" v-if="!item.images[1]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[1].url" mode="widthFix" v-else />
					</div>
					<div class="style-5-item" @click="navTo(item.images[2].href)">
						<div class="empty-img-box" v-if="!item.images[2]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[2].url" mode="widthFix" v-else />
					</div>
					<div class="style-5-item" @click="navTo(item.images[3].href)">
						<div class="empty-img-box" v-if="!item.images[3]">
							<i class="el-icon-picture"></i>
						</div>
						<img :src="item.images[3].url" mode="widthFix" v-else />
					</div>
				</div>
			</div>
			<div class="diy-style-6" v-if="item.style == 6"
				 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
				<div class="item-box"
					 :style="{'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px'}">
					<div class="style-left" style="border-right:none">
						<div class="style-top" style="border-bottom:none" @click="navTo(item.images[0].href)">
							<div class="empty-img-box" v-if="!item.images[0]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[0].url" mode="widthFix" v-else />
						</div>
						<div class="style-down" @click="navTo(item.images[1].href)">
							<div class="empty-img-box" v-if="!item.images[1]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[1].url" mode="widthFix" v-else />
						</div>
					</div>
					<div class="style-right">
						<div class="style-top" style="border-bottom:none" @click="navTo(item.images[2].href)">
							<div class="empty-img-box" v-if="!item.images[2]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[2].url" mode="widthFix" v-else />
						</div>
						<div class="style-down" @click="navTo(item.images[3].href)">
							<div class="empty-img-box" v-if="!item.images[3]">
								<i class="el-icon-picture"></i>
							</div>
							<img :src="item.images[3].url" mode="widthFix" v-else />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "cTitle",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			menuMap: {
				type: Array,
				default() {
					return []
				}
			},
		},
		data() {
			return {
				
			}
		},
		mounted() {
			
		},
		methods: {
			// 页面跳转
			navTo(url) {
				if (this.menuMap.indexOf(url) != -1) {
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
		}
	}
</script>

<style scoped>
.magic-box {
    width: 100%;
}
.diy-style-1 {
    width: 100%;
}
.diy-style-1 .empty-img-box {
    width: 100%;
    height: 375px;
}
.diy-style-1 img {
    width: 100%;
    display: block;
    max-width: 100%;
    object-fit: contain;
}
.diy-style-2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diy-style-2 .empty-img-box {
    height: 190px;
    width: 100%;
}
.diy-style-2 img {
    width: 100%;
}
.diy-style-3 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diy-style-3 .empty-img-box {
    height: 127px;
    width: 100%;
}
.diy-style-3 img {
    width: 100%;
}
.style-3-item {
    width: 33.3333%;
}
.diy-style-4 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
}
.diy-style-4 img {
   width: 100%;
   height: 100%;
}
.diy-style-5 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 95px;
}
.style-5-item {
    width: 25%;
    height: 100%;
}
.diy-style-5 img {
    width: 100%;
    height: 100%;
}
.diy-style-6 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
}
.diy-style-6 img {
    width: 100%;
    height: 100%;
}
.item-box {
	width: 100%;
	height: 100%;
	display: flex;
}
.style-1 {
    /*width: 375px;*/
    height: 375px;
    color: #8c8c8c;
    font-size: 12px;
    border-radius: 0;
    border: 1px solid #ddd;
    text-align: center;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #f3f5f7;
}
.style-2 {
    /*width: 375px;*/
    height: 189px;
    color: #8c8c8c;
    font-size: 12px;
    border-radius: 0;
    border: 1px solid #ddd;
    background: #f3f5f7;
    display: flex;
}
.style-2-item {
    width: 50%;
    cursor: pointer;
}
.picMagic .el-form--label-top .el-form-item__label {
    padding: 0;
}
.picMagic .el-form-item {
    margin-bottom: 0;
}
.style-left {
    width: 50%;
    height: 100%;
    cursor: pointer;
    border-right: 1px solid #ddd;
}
.style-right {
    width: 50%;
    height: 100%;
    cursor: pointer;
}
.style-top,.style-down {
    width: 100%;
    height: 50%;
    justify-content: center;
    flex-direction:column;
}
.style-top {
    border-bottom: 1px solid #ddd;
}
.style-1 img {
    width: 100%;
    height: 100%;
}
.style-2 img {
    width: 100%;
    height: 100%;
}
</style>